<template>
  <div class="toolbar">
    <div class="canvas-config">
      <span>画布颜色：</span>
      <el-color-picker
        v-model="canvasStyleData.backgroundColor"
      ></el-color-picker>
      <span>画布大小：</span>
      <input v-model="canvasStyleData.width" />
      <span>*</span>
      <input v-model="canvasStyleData.height" />
    </div>
    <el-button :disabled="!curComponent" @click="handleDel">删除</el-button>
    <el-button :disabled="!curComponent" @click="upComponent">上移</el-button>
    <el-button :disabled="!curComponent" @click="downComponent">下移</el-button>
    <el-button :disabled="!curComponent" @click="topComponent">置顶</el-button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: mapState(["canvasStyleData", "curComponent"]),

  mounted() {},

  methods: {
    handleDel() {
      this.$store.commit("deleteComponent");
    },
    upComponent() {
      this.$store.commit("upComponent");
    },
    downComponent() {
      this.$store.commit("downComponent");
    },
    topComponent() {
      this.$store.commit("topComponent");
    },
  },
};
</script>
<style lang="less" scoped>
.toolbar {
  padding: 15px 10px;
  white-space: nowrap;
  overflow-x: auto;
  background: #fff;
  border-bottom: 1px solid #ddd;

  .canvas-config {
    display: inline-block;
    margin: 0 10px;
    font-size: 14px;
    color: #606266;

    input {
      width: 50px;
      margin-left: 10px;
      outline: none;
      padding: 0 5px;
      border: 1px solid #ddd;
      color: #606266;
    }

    span {
      margin-left: 10px;
    }
  }
}
</style>
